<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file" id="iptFile">

  <!-- 导入 axios -->
  <script src="https://lib.baomitu.com/axios/0.26.1/axios.min.js"></script>
  <!-- 利用 axios 发起请求，提交数据到服务器 -->
  <script>
    // 请求体的格式：
    // 1. 普通对象
    // 2. FormData
    // 注意：如果接口要的是普通对象，你给人家传递一个 FormData 过去，后端解析不出来！
    // 注意：前端是受制于后端接口的！前端只能被动调用后端的接口，被动传递后端所需要的数据！
    // 查询参数：
    // 1. 在 URL 地址末尾，携带查询参数
    // 2. 通过 params 携带查询参数
    // 路径参数：
    // 在 URL 地址中，而且是 / 的后面，可以携带动态的路径参数

    // 统一设置请求根路径
    axios.defaults.baseURL = 'http://www.liulongbin.top:3009'

    /* axios.post('/api/post', { name: 'zs', age: 20 }).then(res => {
      console.log(res)
    }) */

    /* const iptFileDOM = document.querySelector('#iptFile')
    iptFileDOM.addEventListener('change', (e) => {
      // 判断是否选择了文件
      if (e.target.files.length === 0) return

      // 创建 FormData 对象
      const fd = new FormData()
      fd.append('avatar', e.target.files[0])

      // 调用接口
      axios.post('/api/upload/avatar', fd).then(res => {
        console.log(res)
      })
    }) */

    /* axios.get('/api/get?name=zs&age=20').then((res) => {
      console.log(res)
    }) */

    // 因为 GET 请求，没有请求体，所以第二个参数，就是配置对象
    /* axios.get('/api/get', {
      // params 来指定查询参数
      params: {
        name: 'zs',
        age: 20
      }
    }).then((res) => {
      console.log(res)
    }) */

    /* axios.post('/api/post?city=beijing', { name: 'zs', age: 20 }).then((res) => {
      console.log(res)
    }) */

    /* axios.post('/api/post', { name: 'zs', age: 20 }, {
      // 这里的 params 是查询参数
      params: {
        city: 'beijing',
        area: 'shunyi'
      },
      // 自定义的请求头
      headers: {
        'x-heima': '666'
      }
    }).then((res) => {
      console.log(res)
    }) */

    // 请求的地址：
    // 在 URL 地址中 ? 后面的是“查询参数”
    // 在 URL 地址中 / 后面的参数是“路径参数”
    // /sys/user/2
  </script>
</body>

</html>